<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>我的-信息编辑</title>
  <link rel="stylesheet" href="../static/css/other.css" th:href="@{/css/other.css}">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
  <link rel="stylesheet" href="../static/css/app.css" th:href="@{/css/app.css}">
  <link rel="stylesheet" href="../static/css/style.min.css" th:href="@{/css/style.min.css}">
  <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">
  <link rel="stylesheet" href="../static/css/animate.css" th:href="@{/css/animate.css}">
</head>
<body>

<nav th:replace="_fragments_login :: menu(4)" class="ui inverted attached segment m-padded-tb-mini">
  <div class="ui container"> <!-- 加一个容器 -->
    <div class="ui inverted secondary stackable menu"> <!-- 菜单 stackable:可堆叠的,表示屏幕小时自动堆叠-->
      <h2 class="ui white header item">GuideSystem</h2> <!-- 蓝绿色标题 -->
      <a href="#" class="m-item m-mobile-hide item"><i class="home icon"></i>首页</a> <!-- icon表示图表 -->
      <a href="#" class="m-item m-mobile-hide item"><i class="edit outline icon"></i>记录</a>
      <a href="#" class="m-item m-mobile-hide item"><i class="info icon"></i>我的</a>
      <div class="m-top-right m-mobile-hide item m-item" style="margin-top: 5px"> <!-- 靠右 -->
        <div class="ui dropdown item">
          <div class="text">
            <img src="../static/images/店铺1.jpg" th:src="@{/images/IMG_6361.JPG}"
                 alt="" class="ui avatar image">
          </div>
          <i class="dropdown icon"></i>
          <div class="menu">
            <a href="#" th:href="@{/admin/logout}" class="item">退出</a>
            <a href="#" th:href="@{/admin/logout}" class="item">注销</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <a href="#" class="ui menu toggle black button icon m-top-right m-mobile-show">
    <i class="sidebar icon"></i>
  </a>
</nav>

<div class="m-container m-padded-tb-big" style="width: 1100px !important;">
  <div class="ui container">
    <div class="ui stackable grid">
      <!--左侧导航栏-->
      <div class="four wide column">
        <div class="ui segment">
          <ul>
            <li><h4>我的订单</h4></li>
            <li class="m-padded-tb-tiny">
              <a href="#" style="color: #0a0a0a">
                <span>全部订单</span>
                <i style="margin-left: 54px" class="ui angle double right icon m-inline-block"></i>
              </a>
            </li>
            <li class="m-padded-tb-tiny">
              <a href="#" style="color: #0a0a0a"><span>待支付</span>
                <i style="margin-left: 68px" class="ui angle double right icon m-inline-block"></i>
              </a>
            </li>
            <li class="m-padded-tb-tiny">
              <a href="#" style="color: #0a0a0a">
                <span>待评价</span>
                <i style="margin-left: 68px" class="ui angle double right icon m-inline-block"></i>
              </a>
            </li>
            <li class="m-padded-tb-tiny">
              <a href="#" style="color: #0a0a0a">
                <span>退款订单</span>
                <i style="margin-left: 54px" class="ui angle double right icon m-inline-block"></i>
              </a>
            </li>
            <br>
            <li><h4>我的收藏</h4></li>
            <li class="m-padded-tb-tiny">
              <a href="#" th:href="@{/collection/resource/list}" style="color: #0a0a0a">
                <span>收藏的资料</span>
                <i style="margin-left: 40px" class="ui angle double right icon m-inline-block"></i>
              </a>
            </li>
            <li class="m-padded-tb-tiny">
              <a href="#" th:href="@{/collection/blog/list}" style="color: #0a0a0a">
                <span>收藏的帖子</span>
                <i style="margin-left: 40px" class="ui angle double right icon m-inline-block"></i>
              </a>
            </li>
            <br>
            <li><h4>我的动态</h4></li>
            <li class="m-padded-tb-tiny">
              <a href="./personal_space.html" th:href="@{/about/space}" target="_blank" style="color: #0a0a0a">
                <span>个人空间</span>
                <i style="margin-left: 54px" class="ui angle double right icon m-inline-block"></i>
              </a>
            </li>
            <li class="m-padded-tb-tiny">
              <a href="#" th:href="@{/archives}" target="_blank" style="color: #0a0a0a">
                <span>发帖动态</span>
                <i style="margin-left: 54px" class="ui angle double right icon m-inline-block"></i>
              </a>
            </li>
            <br>
            <li><h4>我的联系人</h4></li>
            <li class="m-padded-tb-tiny">
              <a href="#" th:href="@{/friend/}" target="_blank" style="color: #0a0a0a">
                <span>好友列表</span>
                <i style="margin-left: 54px" class="ui angle double right icon m-inline-block"></i>
              </a>
            </li>
            <li class="m-padded-tb-tiny">
              <a href="#" th:href="@{/chat/}" target="_blank" style="color: #0a0a0a">
                <span>消息</span>
                <i style="margin-left: 82px" class="ui angle double right icon m-inline-block"></i>
              </a>
            </li>
            <br>
            <li><h4>我的钱包</h4></li>
            <li class="m-padded-tb-tiny">
              <a href="#" style="color: #0a0a0a">
                <span>余额</span>
                <i style="margin-left: 82px" class="ui angle double right icon m-inline-block"></i>
              </a>
            </li>
            <li class="m-padded-tb-tiny">
              <a href="#" style="color: #0a0a0a">
                <span>优惠卷</span>
                <i style="margin-left: 68px" class="ui angle double right icon m-inline-block"></i>
              </a>
            </li>
            <br>
            <li><h4>个人信息</h4></li>
            <li class="m-padded-tb-tiny">
              <a href="about/detail" th:href="@{/about/detail}" style="color: #0a0a0a">
                <span>详细信息</span>
                <i style="margin-left: 54px" class="ui angle double right icon m-inline-block"></i>
              </a>
            </li>
            <li class="m-padded-tb-tiny">
              <a href="about/edit" th:href="@{/about/edit}" style="color: #0a0a0a">
                <span>账户设置</span>
                <i style="margin-left: 54px" class="ui angle double right icon m-inline-block"></i>
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div class="twelve wide column">
        <div class="ui container">
          <div class="ui grid">
            <div class="wide column">
              <form action="about_edit" th:action="@{/about/edit/success}" method="post"
                    data-navigateable="true" class="ui form">
                <h2 class="text-xl-center text-black-50" style="font-weight: bold">基本信息</h2>
                <div>
                  <div class="form-group">
                    <div class="field">
                      <label class="text-black-50">用户昵称:</label>
                      <input name="nickname" class="form-control" type="text">
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="field">
                      <label class="text-black-50">头像地址:</label>
                      <input name="avatar" class="form-control" type="text">
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="field">
                      <label class="text-black-50">性别:</label>
                      <select name="sex" class="form-control">
                        <option value=""></option>
                        <option value="男">男</option>
                        <option value="女">女</option>
                      </select>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="field">
                      <label class="text-black-50">邮箱:</label>
                      <input name="email" class="form-control" type="text">
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="field">
                      <label class="text-black-50">所在地:</label>
                      <input name="address" class="form-control" type="text">
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="field">
                      <label class="text-black-50">理想院校:</label>
                      <input name="dreamCollege" class="form-control" type="text">
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="field">
                      <label class="text-black-50">个签:</label>
                      <input name="signature" class="form-control" type="text">
                    </div>
                  </div>
                </div>
                <h2 class="text-xl-center text-black-50" style="font-weight: bold">教育信息</h2>
                <div>
                  <div class="form-group">
                    <div class="field">
                      <label class="text-black-50">学校:</label>
                      <input name="school" class="form-control" type="text">
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="field">
                      <label class="text-black-50">专业:</label>
                      <input name="filed" class="form-control" type="text">
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="field">
                      <label class="text-black-50">入学年份:</label>
                      <div class="form-controls">
                        <select name="enrollmentTime" class="form-control" id="enrollmentTime">
                          <option value=""></option>
                          <option value="2022">2022</option>
                          <option value="2021">2021</option>
                          <option value="2020">2020</option>
                          <option value="2019">2019</option>
                          <option value="2018">2018</option>
                          <option value="2017">2017</option>
                          <option value="2018">2016</option>
                          <option value="2017">2015</option>
                        </select>
                      </div>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="field">
                      <label class="text-black-50">最高学历:</label>
                      <div class="form-controls">
                        <select name="academic" class="form-control" id="academic">
                          <option value=""></option>
                          <option value="博士">博士</option>
                          <option value="硕士">硕士</option>
                          <option value="本科">本科</option>
                          <option value="专科">大专</option>
                          <option value="专科">中专</option>
                          <option value="高中">高中</option>
                        </select>
                      </div>
                    </div>
                  </div>
                </div>
                <h2 class="text-xl-center text-black-50" style="font-weight: bold">个人简介</h2>
                <div class="required field">
                  <textarea class="form-control" id="description" name="description" style="height: 100px"
                            placeholder="请输入描述..."></textarea>
                </div>
                <!--End-->
                <input type="hidden" name="id" th:value="${session.user.id}">
                <div class="modal-footer">
                  <button type="submit" class="btn btn-outline-primary">确认修改</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<br><br>

<footer th:replace="_fragments_login :: footer" class="ui inverted vertical segment m-padded-tb-massive">
  <!-- vertical:垂直的 segment:条横 inverted:倒置的 -->
  <div class="ui center aligned container"> <!-- center aligned:居中 aligned:使成为一条线-->
    <div class="ui inverted divided stackable grid"> <!-- inverted divided grid:格线分成16份 -->
      <div class="three wide column">
        <h4 class="ui inverted header m-text-thin">消费者权益</h4>
        <div class="ui inverted link list">
          <span class="item m-text-thin">消费者热线：3838438</span>
          <span class="item m-text-thin">外卖热线：5201314</span>
          <span class="item m-text-thin">已获得食品安全局认证</span>
        </div>
      </div>

      <!-- 分成三列 -->
      <div class="three wide column">
        <h4 class="ui inverted header m-text-thin">商家加盟</h4>
        <div class="ui inverted link list">
          <a href="#" class="item m-text-thin">食品外卖开店申请</a>
          <a href="#" class="item m-text-thin">美食商家入驻(非外卖)</a>
          <a href="#" class="item m-text-thin">合作/招聘</a>
        </div>
      </div>

      <!-- 分成三列 -->
      <div class="three wide column">
        <h4 class="ui inverted header m-text-thin">联系我</h4>
        <div class="ui inverted link list">
          <span class="item m-text-thin" style="height: 28px">邮箱: 1923326384@qq.com</span>
          <span class="item m-text-thin">QQ: 1923326384</span>
        </div>
      </div>

      <!-- 分成七列 -->
      <div class="seven wide column">
        <h4 class="ui inverted header m-text-thin">企业文化</h4>
        <p class="m-text-thin m-text-spaced m-opacity-mini m-text-lined">
          消费者第一，商家第二 | 诚信诚实正直，言出必践言行一致 | 以“吃”为核心，建设生活服务业从需求侧到供给侧的多层次科技服务平台。
        </p>
      </div>

    </div>
    <div class="ui inverted section divider"></div>
    <p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright @ 2022-05-29 HanYuFan Designed by HanYuFan</p>
  </div>
</footer>

<th:block th:replace="_fragments_login :: script">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
  <script src="../static/js/app.js" th:src="@{/js/app.js}"></script>
  <script src="../static/js/main.min.js" th:src="@{/js/main.min.js}"></script>
</th:block>
<script src="../static/js/app.js" th:src="@{/js/app.js}"></script>
<script>
    $('.ui.form').form({
        fields: {
            nickname: {
                rules: [{
                    type: 'empty',
                    prompt: '昵称不能为空'
                }]
            },
            enrollmentTime: {
                rules: [
                    {
                        type: 'empty',
                        prompt: '入学时间不能为空'
                    }
                ]
            },
            avatar: {
                rules: [{
                    type: 'empty',
                    prompt: '头像地址不能为空'
                }]
            },
            sex: {
                rules: [
                    {
                        type: 'empty',
                        prompt: '性别不能为空'
                    }
                ]
            },
            email: {
                rules: [{
                    type: 'empty',
                    prompt: '邮箱不能为空'
                }]
            },
            dreamCollege: {
                rules: [
                    {
                        type: 'empty',
                        prompt: '目标院校不能为空'
                    }
                ]
            },
            address: {
                rules: [{
                    type: 'empty',
                    prompt: '居住地不能为空'
                }]
            },
            signature: {
                rules: [
                    {
                        type: 'empty',
                        prompt: '入学时间不能为空'
                    }
                ]
            },
            school: {
                rules: [{
                    type: 'empty',
                    prompt: '在读学校不能为空'
                }]
            },
            filed: {
                rules: [
                    {
                        type: 'empty',
                        prompt: '在读专业不能为空'
                    }
                ]
            },
            academic: {
                rules: [
                    {
                        type: 'empty',
                        prompt: '最高学历不能为空'
                    }
                ]
            },
        },
        inline: true,
        on: 'blur'
    });
</script>

</body>
</html>